/**
 * @description  : 审批人选择 
 * @descriptionDetail :  docComponent 使用
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-12-05 16:24:54
 */
<template>
  <view class="page">
    <theme-navbar :is-white="false" :isBack="hasBackIcon" title="人员选择" :custom-back="goBack" style="z-index: 99999">
      <view class="nav-right-icon">
        <text @tap="save">
          确定
        </text>
      </view>
    </theme-navbar>
    <view class="content u-page">
      <view class="select-lay">
        <view class="sel-desc">
          已选择：
        </view>
        <view class="select-users">
          <u-tag type="info" :closeable="true" :text="item.personName" v-for="item in selUsers" :key="item.orgId" @close="deleteSelectUser(item)"></u-tag>
        </view>
      </view>

      <list-view
        :i="0"
        :index="0"
        :load-data="loadData"
        :init-load="false"
        :fixed="false"
        :justScroll="true"
        ref="mescrollItem0"
      >
        <view class="n-lay" slot-scope="d">
          <view class="item-checkbox item-content">
            <u-checkbox
              :name="d.data.personId"
              :size="50"
              shape="square"
              v-model="d.data.checked"
              @change="checkboxChange"
            >
              {{ d.data.personName }}({{ d.data.deptName }})
            </u-checkbox>
          </view>
        </view>
      </list-view>
    </view>
  </view>
</template>

<script>
import listView from '@/components/list_view.vue';
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
import commonService from "@/service/common/common.service.js";
export default {
  name:"FlowUserSelectCom",
  components: {
    listView,
  },
  mixins: [MescrollMoreMixin,],
  props:{
    flowNodes: {},
    bizUuid:{
      type:String,
      default:'',
    },
    flowCode:{
      type:String,
      default:'',
    },
    hasBackIcon:{
      type:Boolean,
      default: true,
    },
  },
  data() {
    return {
      selUsers: [],
      user: this.$storage.get(this.$rp.common.USER),
    }
  },
  computed: {
    selUsersStr() {
      let ar = [];
      this.selUsers.forEach(itm => {
        ar.push(itm.orgId);
      });
      return ar.join(",");
    },
  },
  watch: {
    flowNodes:{
      immediate: true,
      handler(flowNodes){
        this.$refs.mescrollItem0 && this.$refs.mescrollItem0.getData();
      },
    },
  },
  mounted() {
    this.$refs['mescrollItem0'].$refs['mescrollRef0'].downHight = 0;
  },
  methods: {
    checkboxChange(e) {
      let isExit = false;
      for (let i = 0; i < this.selUsers.length; i++) {
        if (this.selUsers[i].personId == e.name) {
          this.selUsers[i].checked = e.value;
          isExit = true;
          if (!e.value) {
            this.selUsers.splice(i, 1);
          }
          break;
        }
      }
      if (!isExit && e.value) {
        let item;
        let userFlows = this.$refs['mescrollItem0'].listDatas;
        for (let i = 0; i < userFlows.length; i++) {
          if (userFlows[i].personId == e.name) {
            item = userFlows[i];
            break;
          }
        }
        if (item != undefined) {
          this.selUsers.push(item);
        }
      }

    },
    // 删除选中人员
    deleteSelectUser(ua) {
      let self = this;
      this.$modal.alert("确认删除吗？", "提示", () => {
        for (let i = 0; i < self.selUsers.length; i++) {
          if (self.selUsers[i].personId == ua.personId) {
            self.selUsers.splice(i, 1);
            let ops = this.$refs["mescrollItem0"].listDatas;
            for (let j = 0; j < ops.length; j++) {
              if (ops[j].personId == ua.personId) {
                ops[j].checked = false;
                break;
              }
            }
          }
        }
      }, "确定", true);
    },
    save() {
      if (this.selUsers.length === 0) {
        this.$modal.alert("请选择人员");
        return;
      }
      this.$emit('flowUserSelectBack', this.selUsers);
    },
    loadData(page) {
      let nodes = this.flowNodes;
      let idx = -1;
      for (let i = 0; i < nodes.length ; i++) {
        if(nodes[i].current) {
          idx = i + 1;
        }
      }
      // 表示超出了是最后一个结束节点 不需要审批人
      if(idx >= nodes.length) {
        this.$u.toast('结束节点,不需要审批人');
        return;
      }
      let queryParams = {};
      queryParams.gfCode = this.flowCode;
      queryParams.isReport = '0';
      queryParams.limit = 100;
      queryParams.page = 1;
      if(idx >= 0) {
        let nextNode = nodes[idx];
        queryParams.bizId = this.bizUuid;
        queryParams.stepCode = nextNode.gfaCode;
      }
      // queryParams.orgLevel = this.user.orgLevel;
      let self = this;
      this.$modal.showLoading("加载中...");
      return new Promise((resolve, reject) => {
        commonService.flowNextPerson(queryParams).then(dr => {
          self.$modal.hideLoading();
          if (dr.success) {
            dr.data.forEach(itm => {
              if(self.selUsersStr.length > 0){
                itm.checked = self.selUsersStr.indexOf(itm.personId) != -1;
              }else{
                itm.checked = false;
              }
            });
            resolve({
              data: {
                list: [...dr.data,],
              },
            });
          } else {
            resolve({
              data: {
                list: [],
              },
            });
          }
        }).catch(err => {
          self.$modal.hideLoading();
          self.$modal.alert('查询失败:' + err);
          resolve({
            data: {
              list: [],
            },
          });
        });
      });
    },
  },
}
</script>

<style scoped lang="scss">
	.n-lay {
		width: 100%;
		display: block;
		padding: 20rpx 20rpx;
		border-bottom: 1px solid $u-border-color;
	}

	.select-lay {
		padding: 20rpx 20rpx;
		border-bottom: 1px solid $u-bg-color;
	}
.sel-desc{
    margin-top: 32rpx;
    color:#999999;
    font-size: 15px;
}
	.select-users {
		height: 28px;
		margin-top: 30rpx;

		uni-text {
      color:#027AFF;
      background: #E6F1FF;
			width: auto;
			font-size: 15px;
      font-weight: bold;
			// border: 1px solid #1fa3ff;
			border-radius: 16px;
			padding: 3px;
			margin: 3px;
		}
	}

	.nav-right-icon {
		margin-right: 30rpx;
		font-size: .8rem;
		color: #FFF;
	}
</style>
